<template>
  <d2-container>
    <div class="app-container">
      <el-steps :active="active" finish-status="success" style="margin-bottom:20px">
        <el-step title="策略期初盈亏"> </el-step>
        <el-step title="现货敞口"> </el-step>
        <el-step title="衍生品头寸"> </el-step>
        <!-- <el-step title="期权头寸"> </el-step> -->
        <el-step title="现货资金"> </el-step>
        <el-step title="现货费用"> </el-step>
        <el-step title="衍生品费用"> </el-step>
        <el-step title="开账"> </el-step>
      </el-steps>
      <!-- 信息 -->
      <div class="info" v-if="active == 1">
        <v-strategiceBeginProfitAndLoss ref="child1"></v-strategiceBeginProfitAndLoss>
      </div>
      <div class="info" v-if="active == 2">
        <v-exposureSpot ref="child2"></v-exposureSpot>
      </div>
      <div class="info" v-if="active == 3">
        <v-futuresPosition ref="child3"></v-futuresPosition>
      </div>
      <div class="info" v-if="active == 4">
        <v-cashMoney ref="child5" class="is-active"></v-cashMoney>
      </div>
      <div class="info" v-if="active == 5">
        <v-costSpot ref="child6"></v-costSpot>
      </div>
      <div class="info" v-if="active == 6">
        <v-costFutures ref="child7"></v-costFutures>
      </div>
      <div class="info" v-if="active == 7">
        <v-makeOutBill ref="child8"></v-makeOutBill>
      </div>
      <el-button style="margin-top: 12px;" @click="pre" v-if="active > 1">上一步</el-button>
      <el-button style="margin-top: 12px;" @click="next" v-if="active < 8">下一步</el-button>
    </div>
  </d2-container>
</template>
<script>
import cashMoney from "./componnets/make_out_a_bill/cashMoney.vue";
import costFutures from "./componnets/make_out_a_bill/costFutures.vue";
import costSpot from "./componnets/make_out_a_bill/costSpot.vue";
import exposureSpot from "./componnets/make_out_a_bill/exposureSpot.vue";
import futuresPosition from "./componnets/make_out_a_bill/futuresPosition.vue";
import makeOutBill from "./componnets/make_out_a_bill/makeOutBill.vue";
// import optionPositions from "./componnets/make_out_a_bill/optionPositions.vue";
import strategiceBeginProfitAndLoss from "./componnets/make_out_a_bill/strategiceBeginProfitAndLoss.vue";
export default {
  //期初开账
  components: {
    "v-cashMoney": cashMoney,
    "v-costFutures": costFutures,
    "v-costSpot": costSpot,
    "v-exposureSpot": exposureSpot,
    "v-futuresPosition": futuresPosition,
    "v-makeOutBill": makeOutBill,
    // "v-optionPositions": optionPositions,
    "v-strategiceBeginProfitAndLoss": strategiceBeginProfitAndLoss
  },
  data() {
    return {
      active: 1,
      cashMoney,
      costFutures,
      costSpot,
      exposureSpot,
      futuresPosition,
      makeOutBill,
      // optionPositions,
      strategiceBeginProfitAndLoss
    };
  },
  methods: {
    next() {
      if (this.active++ > 7) this.active = 1;
    },
    pre() {
      if (this.active-- < 1) this.active = 1;
    }
  },
  mounted() {
     this.getstrageData();
  }
};
</script>
